<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <ui-header></ui-header>
    <a-layout>
      <ui-sider></ui-sider>
      <a-layout class="ui-layout-content">
        <a-layout-content class="mr-20">
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import {
  Layout
} from "ant-design-vue";

import UIHeader from './basic/UIHeader'
import UISider from './basic/UISider'

export default {
  name: "App",
  components: {
    UiHeader: UIHeader,
    UiSider: UISider,
    // 布局
    ALayout: Layout,
    ALayoutSider: Layout.Sider,
    ALayoutContent: Layout.Content,

    // ALayoutFooter: Layout.Footer,
  }
};
</script>

<style lang="less" scoped>
@import "~assets/theme/basic/basic.less";

.ui-layout-content {
  max-height: calc(100vh - @header-height);
}
.ui-sider-content{
  max-height: calc(100vh - @header-height);
  overflow-y: auto;
}
</style>